/*
  Dygraphs Styles
  ------------------------------------------------------------------------------
  Overrides out-of-the-box styles
*/

$dygraph--padding: $ix-marg-b;

.dygraph {
  position: relative;
  width: 100%;
  height: 100%;

  &:hover {
    cursor: default;
  }
}
.dygraph-child {
  top: $dygraph--padding;
  right: $dygraph--padding;
  bottom: $dygraph--padding;
  left: $dygraph--padding;
}

.dygraph-child,
.dygraph-child-container {
  position: absolute;
}

.dygraph-child-container {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
}

/* Axis Labels */
.dygraph-axis-label {
  color: $g11-sidewalk !important;
  font-weight: 600 !important;
  user-select: none;
  font-size: $ix-text-tiny;
}
.dygraph-axis-label-y {
  padding: 0 $ix-marg-b 0 0 !important;
  text-align: right !important;
  left: 0 !important;
  user-select: none;
}
.dygraph-axis-label-y2 {
  padding: 0 0 0 $ix-marg-b !important;
  text-align: left !important;
  user-select: none;
}

/* Vertical Axis Labels */
.dygraph-ylabel,
.dygraph-y2label {
  user-select: none;
  position: absolute;
  width: 90%;
  text-align: center;
  font-size: $ix-text-tiny;
  top: 0px;
  left: 8px;
  color: $g11-sidewalk;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dygraph-ylabel {
  transform: rotate(-90deg) translate(9%, 115%);
}

.dygraph-y2label {
  transform: rotate(90deg);
}

.graph--hasYLabel {
  .dygraph-axis-label-y {
    padding: 0 $ix-marg-a 0 0 !important;
  }
  .dygraph-axis-label-y2 {
    padding: 0 0 0 $ix-marg-a !important;
  }
}
